import React, { useEffect, useState } from 'react';
import { t } from '@lingui/macro';
import { Drawer, Tab } from '@alifd/next';
import { useStore } from '@/hooks';
import { observer } from 'mobx-react-lite';
import QRDialog from '@/components/QRDialog';

const QR = ({ modal, ...formProps }) => {
  const { memberStore: store } = useStore();
  const [qr, setQr] = useState(null);
  const [qrProps, setQrProps] = useState(null);

  useEffect(() => {
    (async () => {
      if (modal?.show === 'backup') {
        await init();
        setQr(modal);
      }
    })();
  }, [modal]);

  async function init() {
    const res = await store.backupCodeUrl(modal?.record?.groupInfo?.value);
    setQrProps({
      describe: t`【${modal?.record?.groupInfo?.label}】备案登记二维码`,
      url: res,
    });
  }

  const onCancel = () => {
    setQr({
      show: null,
      record: null,
    });
  };

  return (
    <>
      <QRDialog
        visible={qr?.show == 'backup'}
        name={qr?.record?.groupInfo?.label}
        onCancel={onCancel}
        okText={t`下载`}
        {...qrProps}
      />
    </>
  );
};

export default observer(QR);
